<template>
  <!-- <div class="box">
    <div class="screen" id="screen">
    </div>
  </div> -->
  <!-- <v-scale-screen> -->
  <!-- <span style="color: white">{{ businessDistributionData }}</span> -->
  <div class="wrap">
    <div class="screen" id="screen">
      <ul class="scaleplate">
        <li v-for="item in 9" :key="item"></li>
      </ul>
      <!-- 顶部 logo -->
      <div class="top">
        <img :src="require('@/assets/img/report/logo.png')" alt="" />
      </div>
      <!-- 交易数据 -->
      <ul class="dashboard">
        <li>
          <p class="number">
            {{
              formatNumber(
                (dashboardData.currentYearTxNumber / 10000).toFixed()
              )
            }}<i>万笔</i>
          </p>
          <p class="label">近一年累计交易笔数</p>
        </li>
        <li>
          <p class="number">
            {{
              formatNumber(
                (
                  dashboardData.currentYearTxAmount /
                  10000 /
                  10000 /
                  100
                ).toFixed()
              )
            }}<i>亿元</i>
          </p>
          <p class="label">近一年累计交易金额</p>
        </li>
        <li>
          <p class="number">
            {{ formatNumber(dashboardData.currentDayTxNumber) }}<i>笔</i>
          </p>
          <p class="label">今日交易笔数</p>
        </li>
      </ul>
      <div class="content">
        <div class="left">
          <div class="introduce">
            <p class="title">公司介绍</p>
            <p class="introduce-content">
              <i v-for="item in introduceList" :key="item">{{ item }}</i>
            </p>
          </div>
          <div class="customer">
            <p class="title">典型客户</p>
            <div class="scroll-wrap">
              <ul
                class="customer-list"
                ref="customerListRef"
                :style="{ height: customerList.length * 36 + 'px' }"
              >
                <li
                  v-for="(item, index) in customerList.concat(
                    customerList.slice(0, 7)
                  )"
                  :key="index"
                >
                  <i class="name">{{ item.name }}</i
                  ><i class="type">{{ item.type }}</i>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="middle">
          <div id="map-chart"></div>
          <!-- <div class="map-legend">
            <p class="trade-legend">当前交易省份</p>
            <p class="business-legend">业务覆盖省份</p>
          </div> -->
        </div>
        <div class="right">
          <div class="trade">
            <p class="title">当日交易量</p>
            <div id="trade-chart"></div>
          </div>
          <div class="industry">
            <p class="title">今日行业分布</p>
            <div id="industry-chart"></div>
            <span class="legend">单位：笔数</span>
          </div>
          <div class="solution">
            <p class="title">行业解决方案</p>
            <ul>
              <li
                v-for="item in solutionList"
                :key="item.title"
                @click="showVideo(item)"
              >
                <img :src="item.icon" />
                <p>{{ item.title }}</p>
              </li>
            </ul>
            <span class="play-icon" @click="showVideo('company')"> </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频弹窗 -->
    <div v-show="videoObj.visible" class="video-modal">
      <video
        :src="videoObj.src"
        width="100%"
        height="100%"
        ref="videoRef"
        controls
        preload="auto"
      ></video>
      <span class="close-icon">
        <i class="close rounded" @click="close" />
      </span>
    </div>
  </div>

  <!-- </v-scale-screen> -->
</template>
<script>
// import VScaleScreen from "v-scale-screen";
import * as echarts from "echarts";
import chinaMap from "@/assets/json/china.json";
import { SOLUTION_LIST, CHINA_CITY_MAP } from "./data";
// import WebSocket from "websocket";
export default {
  components: {
    // VScaleScreen,
  },
  data() {
    return {
      videoObj: {
        src: "",
        visible: false,
      },
      dashboardData: {
        merchantNumber: "0", //商户数
        userNumber: "0", //用户数
        currentYearTxNumber: "0", //当年交易数量
        currentDayTxNumber: "0", //当天交易数量
        currentYearTxAmount: "0", //当年交易金额
      },
      introduceList: [], // 公司介绍
      customerList: [], // 典型客户列表
      // 当日交易量x轴
      currentDayX: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
      ],
      currentDayTxData: {
        number: [], //交易量
        amount: [], //交易金额
      },
      monthTxData: {
        number: [], //交易量
        month: [], //月份
        amount: [], //交易金额
      },
      userData: [
        // {
        //   name: "个人",
        //   value: 0,
        // },
        // {
        //   name: "企业",
        //   value: 100,
        // },
        // {
        //   name: "个体户",
        //   value: 0,
        // },
      ],
      businessDistributionData: [
        // { name: "银行金融机构", value: 0 },
        // { name: "准金融机构", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "航运物流", value: 0 },
        // { name: "教育", value: 0 },
        // { name: "航运物流", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "汽车及出行", value: 0 },
        // { name: "教育", value: 0 },
      ],
      points: [
        {
          value: [127.9688, 45.368],
          name: "黑龙江",
          number: 1.84,
          value: 1.84,
          itemStyle: { normal: { areaColor: "#FD9A9A" } },
        },
        {
          value: [110.3467, 41.4899],
          name: "内蒙古",
          number: 0.42,
          value: 0.42,
          itemStyle: { normal: { areaColor: "#FFDC63" } },
        },
        { value: [125.8154, 44.2584], name: "吉林", number: 1.4, value: 1.4 },
        {
          value: [116.4551, 40.2539],
          name: "北京",
          number: 14.28,
          value: 14.28,
        },
        { value: [114.4995, 38.1006], name: "辽宁", number: 4.51, value: 4.51 },
        { value: [117.4219, 39.4189], name: "天津", number: 4.35, value: 4.35 },
        { value: [114.4995, 38.1006], name: "河北", number: 8.04, value: 8.04 },
        { value: [112.3352, 37.9413], name: "山西", number: 0.27, value: 0.27 },
        {
          value: [109.1162, 34.2004],
          name: "陕西",
          number: 12.91,
          value: 12.91,
        },
        { value: [103.5901, 36.3043], name: "甘肃", number: 0.01, value: 0.01 },
        { value: [106.3586, 38.1775], name: "宁夏", number: 2.09, value: 2.09 },
        { value: [101.4038, 36.8207], name: "青海", number: 0.06, value: 0.06 },
        { value: [87.9236, 43.5883], name: "新疆", number: 1.58, value: 1.58 },
        { value: [91.11, 29.97], name: "西藏", number: 0, value: 0 },
        { value: [103.9526, 30.7617], name: "四川", number: 9.27, value: 9.27 },
        {
          value: [108.384366, 30.439702],
          name: "重庆",
          number: 13.33,
          value: 13.33,
        },
        {
          value: [117.1582, 36.8701],
          name: "山东",
          number: 59.41,
          value: 59.41,
        },
        { value: [113.4668, 34.6234], name: "河南", number: 8.04, value: 8.04 },
        { value: [118.8062, 31.9208], name: "江苏", number: 11.1, value: 11.1 },
        { value: [117.29, 32.0581], name: "安徽", number: 7.49, value: 7.49 },
        { value: [114.3896, 30.6628], name: "湖北", number: 6.12, value: 6.12 },
        {
          value: [119.5313, 29.8773],
          name: "浙江",
          number: 14.62,
          value: 14.62,
        },
        {
          value: [119.4543, 25.9222],
          name: "福建",
          number: 11.46,
          value: 11.46,
        },
        { value: [116.0046, 28.6633], name: "江西", number: 0.49, value: 0.49 },
        { value: [113.0823, 28.2568], name: "湖南", number: 3.78, value: 3.78 },
        { value: [106.6992, 26.7682], name: "贵州", number: 3.47, value: 3.47 },
        { value: [102.9199, 25.4663], name: "云南", number: 1.6, value: 1.6 },
        {
          value: [113.12244, 23.009505],
          name: "广东",
          number: 20.95,
          value: 20.95,
        },
        { value: [110.3893, 19.8516], name: "广西", number: 10.3, value: 10.3 },
        { value: [106.6992, 26.7682], name: "海南", number: 4.54, value: 4.54 },
        {
          value: [121.4648, 31.2891],
          name: "上海",
          number: 10.17,
          value: 10.17,
        },
        { value: [119.18, 25.563], name: "台湾", number: 0, value: 0 },
        {
          value: [114.16546, 22.27534],
          name: "香港特别行政区",
          number: 0,
          value: 0,
        },
        {
          value: [113.54913, 22.19875],
          name: "澳门特别行政区",
          number: 0,
          value: 0,
        },
      ],
      geoCoordMap: [
        {
          value: [127.9688, 45.368],
          name: "黑龙江",
          number: 1.84,
          value: 1.84,
          // itemStyle: { normal: { areaColor: "#FD9A9A" } },
        },
        {
          value: [110.3467, 41.4899],
          name: "内蒙古",
          number: 0.42,
          value: 0.42,
          // itemStyle: { normal: { areaColor: "#FFDC63" } },
        },
        { value: [125.8154, 44.2584], name: "吉林", number: 1.4, value: 1.4 },
        {
          value: [116.4551, 40.2539],
          name: "北京",
          number: 14.28,
          value: 14.28,
        },
        { value: [114.4995, 38.1006], name: "辽宁", number: 4.51, value: 4.51 },
        { value: [117.4219, 39.4189], name: "天津", number: 4.35, value: 4.35 },
        { value: [114.4995, 38.1006], name: "河北", number: 8.04, value: 8.04 },
        { value: [112.3352, 37.9413], name: "山西", number: 0.27, value: 0.27 },
        {
          value: [109.1162, 34.2004],
          name: "陕西",
          number: 12.91,
          value: 12.91,
        },
        { value: [103.5901, 36.3043], name: "甘肃", number: 0.01, value: 0.01 },
        { value: [106.3586, 38.1775], name: "宁夏", number: 2.09, value: 2.09 },
        { value: [101.4038, 36.8207], name: "青海", number: 0.06, value: 0.06 },
        { value: [87.9236, 43.5883], name: "新疆", number: 1.58, value: 1.58 },
        { value: [91.11, 29.97], name: "西藏", number: 0, value: 0 },
        { value: [103.9526, 30.7617], name: "四川", number: 9.27, value: 9.27 },
        {
          value: [108.384366, 30.439702],
          name: "重庆",
          number: 13.33,
          value: 13.33,
        },
        {
          value: [117.1582, 36.8701],
          name: "山东",
          number: 59.41,
          value: 59.41,
        },
        { value: [113.4668, 34.6234], name: "河南", number: 8.04, value: 8.04 },
        { value: [118.8062, 31.9208], name: "江苏", number: 11.1, value: 11.1 },
        { value: [117.29, 32.0581], name: "安徽", number: 7.49, value: 7.49 },
        { value: [114.3896, 30.6628], name: "湖北", number: 6.12, value: 6.12 },
        {
          value: [119.5313, 29.8773],
          name: "浙江",
          number: 14.62,
          value: 14.62,
        },
        {
          value: [119.4543, 25.9222],
          name: "福建",
          number: 11.46,
          value: 11.46,
        },
        { value: [116.0046, 28.6633], name: "江西", number: 0.49, value: 0.49 },
        { value: [113.0823, 28.2568], name: "湖南", number: 3.78, value: 3.78 },
        { value: [106.6992, 26.7682], name: "贵州", number: 3.47, value: 3.47 },
        { value: [102.9199, 25.4663], name: "云南", number: 1.6, value: 1.6 },
        {
          value: [113.12244, 23.009505],
          name: "广东",
          number: 20.95,
          value: 20.95,
        },
        { value: [110.3893, 19.8516], name: "广西", number: 10.3, value: 10.3 },
        { value: [106.6992, 26.7682], name: "海南", number: 4.54, value: 4.54 },
        {
          value: [121.4648, 31.2891],
          name: "上海",
          number: 10.17,
          value: 10.17,
        },
        { value: [119.18, 25.563], name: "台湾", number: 0, value: 0 },
        {
          value: [114.16546, 22.27534],
          name: "香港特别行政区",
          number: 0,
          value: 0,
        },
        {
          value: [113.54913, 22.19875],
          name: "澳门特别行政区",
          number: 0,
          value: 0,
        },
      ],
      websocketObj1: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 1,
      },
      websocketObj2: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 2,
      },
      websocketObj3: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 3,
      },
      websocketObj4: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 4,
      },
      websocketObj5: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 5,
      },
      websocketObj6: {
        websocket: null,
        timer: null,
        serverTimer: null,
        flag: 6,
      },
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      animationTimerArr: [],
      solutionList: JSON.parse(JSON.stringify(SOLUTION_LIST)),
      mapTimer: null,
    };
  },
  mounted() {
    // let baseUrl = "ws://192.168.140.43:8082";
    // let baseUrl = "ws://172.31.2.76:11304/";
    // let baseUrl = "ws://103.77.135.105/api";
    // let baseUrl = "ws://172.31.2.77/api";
    let baseUrl = "wss://display.cpcn.com.cn/api";
    // let baseUrl = "wss://" + location.host + "/api";

    this.initWebsocket(
      this.websocketObj1,
      `${baseUrl}/DashboardService/dp/allData`
    );
    // 今日交易量
    this.initWebsocket(
      this.websocketObj2,
      `${baseUrl}/DashboardService/dp/currentDayTxData`
    );
    // 公司介绍
    this.initWebsocket(
      this.websocketObj3,
      `${baseUrl}/DashboardService/dp/companyIntroduction`
    );
    // 典型客户
    this.initWebsocket(
      this.websocketObj4,
      `${baseUrl}/DashboardService/dp/typicalCustomer`
    );
    // 今日行业分布
    this.initWebsocket(
      this.websocketObj5,
      `${baseUrl}/DashboardService/dp/businessDistributionData`
    );
    // this.initWebsocket(
    //   this.websocketObj6,
    //   `${baseUrl}/DashboardService/dp/mapData`
    // );
    // 获取当日数据 --左上
    this.getCurrentDayTxData();
    // 获取当月数据 --左下
    this.getCurrentMonthTxData();
    // 获取用户数据 --右上
    this.getUserData();
    // 获取行业数据 --右下
    this.getBusinessDistributionData();
    this.getChinaData();

    this.handleScreenAuto();
    window.onresize = () => {
      this.handleScreenAuto();
    };
    // 屏幕缩放
    // this.handleScreenAuto();
  },
  // deleted() {
  //   window.onresize = null;
  // },
  methods: {
    close() {
      this.videoObj.visible = false;
    },
    showVideo(item) {
      let src = "";
      if (item === "company") {
        src = require("@/assets/video/company.mp4");
      } else {
        src = item.video;
      }
      this.videoObj.visible = true;
      this.videoObj.src = src;
      this.$nextTick(() => {
        this.$refs.videoRef.play();
        this.$refs.videoRef.addEventListener("ended", () => {
          this.close();
        });
      });
    },
    getCurrentDayTxData() {
      // if (this.myChart2 && this.getDateState()) {
      //   this.myChart2.dispose();
      // }
      const option = {
        //你的代码
        backgroundColor: "",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "rgb(126,199,255)",
            },
          },
          valueFormatter: (value) => {
            if (Math.floor(value) === +value) {
              return value;
            } else {
              return Math.floor(Math.pow(10, value));
            }
          },
        },
        legend: {
          show: true,
          itemWidth: 16,
          itemHeight: 16,
          right: 10,
          top: -2,
          data: [
            {
              name: "金额",
              icon: "react",
              textStyle: {
                fontSize: 14,
                color: "#ECF7FF",
                // fontWeight: "bold",
                padding: [0, 8, 0, 8],
              },
              itemStyle: {
                color: "#5febfa",
              },
            },
            {
              name: "笔数",
              icon: "react",
              textStyle: {
                fontSize: 14,
                color: "#ECF7FF",
                // fontWeight: "bold",

                padding: [0, 8, 0, 8],
              },
              itemStyle: {
                fontSize: 16,
                color: "#de4266",
              },
            },
          ],
          textStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 14,
            padding: [0, 8, 0, 8],
          },
        },
        grid: {
          top: "19%",
          left: "10%",
          right: "1%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category", //连续数据
            boundaryGap: false,
            axisLine: {
              //x坐标轴轴线
              show: true,
              lineStyle: {
                color: "", //x轴轴线颜色
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(112, 151, 184, 1)", //x轴刻度颜色
                fontSize: 14,
              },
            },
            splitLine: {
              //分割线
              show: false,
            },
            axisTick: {
              //刻度
              show: false,
            },
            data: this.currentDayX,
          },
        ],
        yAxis: [
          {
            name: "",
            // type: "log",
            nameTextStyle: {
              color: "#fff",

              fontSize: 12,
              padding: [0, 60, 0, 0],
            },
            // minInterval: 1,
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false, //去掉y轴
            },
            axisLabel: {
              show: false, //去掉y轴label
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: ["20%", "0%"],
            // max: 10,
          },
          {
            name: "",
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              padding: [0, 60, 0, 0],
            },
            // minInterval: 1,
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false, //去掉y轴
            },
            axisLabel: {
              show: false, //去掉y轴label
              // textStyle: {
              //   color: "rgba(112, 151, 184, 1)",
              //   fontSize: 14,
              // },
            },
            axisTick: {
              show: false,
            },
            boundaryGap: ["0%", "50%"],
          },
        ],
        series: [
          {
            name: "金额",
            type: "line",
            yAxisIndex: 0,
            symbol: "roundRect",
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: "#56d5f8", // 线条颜色
              },
            },
            showSymbol: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "rgba(86, 213, 248, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(86, 213, 248, 0)",
                  },
                ],
                global: false,
              },
            },
            data: this.currentDayTxData.amount.map(
              (item) => item && Math.log10(item)
            ),
            // data: this.currentDayTxData.amount,
          },
          {
            name: "笔数",
            type: "line",
            yAxisIndex: 1,
            showSymbol: false,
            symbol: "roundRect", // 正方形
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: "#de4266", // 线条颜色
              },
            },
            itemStyle: {
              //折线拐点样式标志
              normal: {
                color: "#de4266", //拐点颜色
                label: {
                  show: true, //开启显示
                  color: "#fff",
                  position: "top", //在上方显示
                  formatter: function (res) {
                    if (res.value) {
                      return res.value;
                    } else {
                      return 0;
                    }
                  },
                },
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "rgba(222, 66, 102, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(222, 66, 102, 0)",
                  },
                ],
                global: false,
              },
            },
            data: this.currentDayTxData.number,
          },
        ],
      };
      if (!this.myChart2) {
        const chartDom = document.getElementById("trade-chart");
        if (chartDom) {
          this.myChart2 = echarts.init(chartDom, {
            width: "345px",
            height: "160px",
          });
        }
      }
      this.myChart2.setOption(option);
    },
    getCurrentMonthTxData() {
      if (this.myChart3 && this.getDateState()) {
        this.myChart3.dispose();
      }
      var chartDom = document.getElementById("bottomLeftMain");
      if (chartDom) {
        this.myChart3 = echarts.init(chartDom, {
          width: "350px",
          height: "200px",
        });
        var option;
        option = {
          backgroundColor: "",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
              fontSize: 18,
            },
            backgroundColor: "rgba(255,255,255,1)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
          },
          grid: {
            top: "15%",
            left: "8%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
          },
          legend: {
            //右上角的图标
            show: true,
            itemWidth: 16,
            itemHeight: 16,
            right: 200,
            data: [
              {
                name: "金额",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  fontWeight: "bold",
                  color: "#ECF7FF",
                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  color: "#5febfa",
                },
              },
              {
                name: "笔数",
                icon: "react",
                textStyle: {
                  fontSize: 14,
                  fontWeight: "bold",
                  color: "#ECF7FF",
                  padding: [0, 8, 0, 8],
                },
                itemStyle: {
                  fontSize: 18,
                  color: "#de4266",
                },
              },
            ],
          },
          xAxis: [
            {
              data: this.monthTxData.month,
              axisLabel: {
                color: "rgba(112, 151, 184, 1)",
                fontSize: 14,
                // interval: "auto", // x轴间距
              },
              axisTick: {
                //刻度
                show: false,
              },
              axisLine: {
                //x坐标轴轴线
                show: true,
                lineStyle: {
                  color: "", //x轴轴线颜色
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              axisLabel: {
                show: false,
                // fontSize: 24,
                // color: "#A1BADF",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              name: "",
            },
            {
              type: "value",
              name: "",
              axisLabel: {
                show: true,
                // fontSize: 24,
                // color: "#A1BADF",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              boundaryGap: ["10%", "50%"],
            },
          ],
          series: [
            {
              name: "金额",
              yAxisIndex: 0,
              type: "bar",
              barWidth: 20,
              data: this.monthTxData.amount,
              showBackground: false,
              backgroundStyle: {
                color: "#69ddee",
              },
              label: {
                show: false,
                position: "top",
                color: "#00A8FF",
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: -0.2,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#69ddee",
                      },
                      {
                        offset: 1,
                        color: "#69ddee",
                      },
                    ],
                  },
                  barBorderRadius: [2, 2, 0, 0],
                },
              },
            },
            {
              name: "笔数",
              type: "line",
              data: this.monthTxData.number,
              showSymbol: false, //不显示拐点
              smooth: true,
              symbol: "circle", //拐点标志形状
              symbolSize: 10,
              lineStyle: {
                color: "#de4266",
                normal: {
                  width: 1,
                  color: "#de4266", // 线条颜色
                },
              },
              itemStyle: {
                color: "#de4266",
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: -0.2,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(222, 66, 102, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(222, 66, 102, 0)",
                    },
                  ],
                },
              },
            },
          ],
        };
        this.myChart3.setOption(option);
      }
    },
    getUserData() {
      if (this.myChart4 && this.getDateState()) {
        this.myChart4.dispose();
      }
      var chartDom = document.getElementById("topRightMain");
      const colorList = ["#85c7f1", "#d54166", "#cbbc39", "#49db90"];

      if (chartDom) {
        this.myChart4 = echarts.init(chartDom, {
          width: "400px",
          height: "200px",
        });

        const max = Math.max(...this.userData.map((item) => item.value));
        const rate = 0.05; //最小比例
        const formatData = this.userData.map((item, index) => {
          let formatValue;
          if (item.value < max)
            formatValue = rate * max + item.value * (1 - rate);
          else formatValue = item.value;
          return {
            ...item,
            value: formatValue,
            orginValue: item.value,
            textStyle: {
              fontSize: 14,
              fontWeight: "bold",
              color: "#ECF7FF",
              // padding: [0, 8, 0, 8],
            },
            label: {
              color: colorList[index],
              fontSize: "22px",
              fontWeight: "bold",
            },
          };
        });

        var option;
        option = {
          backgroundColor: "",
          color: colorList,
          legend: {
            //图例（小方块）
            itemHeight: 16,
            itemWidth: 16,
            icon: "rect",
            orient: "horizontal",
            // top: "bottom",
            left: "15%",
            bottom: "55",
            itemGap: 40,
            // padding: [10, 0],
            // right: "5%",
            textStyle: {
              align: "left",
              color: "#",
              verticalAlign: "middle",
              textStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 20,
                padding: [0, 8, 0, 8],
              },
            },
            // data: this.userData,
            data: formatData,
            formatter: (name) => {
              if (this.userData.length) {
                const item = this.userData.filter(
                  (item) => item.name === name
                )[0];
                return `${name}`;
              }
            },
          },
          // tooltip: {
          //   trigger: "item",
          //   formatter: "{c}",
          // },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["45%", "65%"],
              center: ["55%", "55%"],
              // roseType: "area",
              // roseType: "radius",
              left: 20,
              label: {
                // formatter: "{c}",
                formatter: (params) => params.data.orginValue,
                fontSize: 18,
              },
              labelLine: {
                show: false,
                length: 20,
                length2: 10,
                lineStyle: {
                  width: 2,
                },
              },
              data: formatData,
            },
          ],
        };
        this.myChart4.setOption(option);
      }
    },
    getBusinessDistributionData() {
      if (this.myChart5 && this.getDateState()) {
        this.myChart5.dispose();
      }
      // 取行业前6条数据
      const data = this.businessDistributionData.slice(0, 6);

      let colorList = [
        "#d54166",
        "#d54166",
        "#fdb34a",
        "#fdb34a",
        // "#4dcee1",
        "#4dcee1",
        "#4dcee1",
        "#49db90",
        "#49db90",
      ];
      const option = {
        color: colorList,
        backgroundColor: "",

        legend: {
          show: false,
        },
        grid: {
          left: "120",
          // right: "16%",
          top: "18",
          // bottom: "0%",
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: "value",
            show: false,
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            type: "category", //坐标轴类型，category：类目轴
            axisTick: {
              show: false,
            },
            inverse: true, //是否反向坐标轴
            data: data.map((item) => item.name),
            axisLabel: {
              color: "#adf8ff",
              fontSize: 14,
              // fontWeight: "bold",
              margin: 10,
              formatter: (name, index) => {
                return `${name}`;
              },
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#adf8ff",
                fontSize: 14,
                // fontWeight: "bold",
              },
              formatter: function (value) {
                return value;
              },
            },
            data: data.map((item) => item.value),
          },
        ],

        series: [
          {
            name: "",
            type: "bar",
            barWidth: 10, // 柱子宽度
            MaxSize: 0,
            showBackground: true,
            // barBorderRadius: [30, 0, 0, 30],
            backgroundStyle: {
              color: "rgba(255,255,255,0)",
            },
            label: {
              show: false,
              offset: [10, -16],
              color: "#fff",
              fontWeight: 500,
              position: "left",
              align: "left",
              formatter: function (params) {
                return params.data.name;
              },
            },
            data: data.map((item, index) => {
              return {
                name: item.name,
                value: item.value,
                itemStyle: {
                  // barBorderRadius: [30, 0, 0, 30],
                  color: colorList[index],
                  borderWidth: 0,
                },
              };
            }),
          },
        ],
      };

      if (!this.myChart5) {
        const chartDom = document.getElementById("industry-chart");
        if (chartDom) {
          this.myChart5 = echarts.init(chartDom, {
            width: "210px",
            height: "170px",
          });
        }
      }
      this.myChart5.setOption(option);
    },
    getChinaData() {
      if (this.myChart6 && this.getDateState()) {
        this.myChart6.dispose();
      }

      var chartDom = document.getElementById("map-chart");
      if (chartDom) {
        echarts.registerMap("china", chinaMap);
        this.myChart6 = echarts.init(chartDom);
        // 分组点样式
        const cityList = JSON.parse(JSON.stringify(CHINA_CITY_MAP));
        const colorList = ["#fe3063", "#feb449", "#8ffedd "];
        // const colorList = ["#d54166", "#cbbc39", "#c3f0f7", "#49db90"];

        const city_type0 = [];
        const city_type1 = [];
        const city_type2 = [];
        const city_type3 = [];
        cityList.forEach((item) => {
          if (item.speed === 0) city_type0.push(item);
          if (item.speed === 1)
            city_type1.push({ ...item, itemStyle: { color: colorList[0] } });
          if (item.speed === 2)
            city_type2.push({ ...item, itemStyle: { color: colorList[1] } });
          if (item.speed === 3)
            city_type3.push({ ...item, itemStyle: { color: colorList[2] } });
        });
        // 无填充色区域
        const noColorArea = ["台湾", "南海诸岛"];
        const noColorData = [];
        noColorArea.forEach((item) => {
          noColorData.push({
            name: item,
            itemStyle: {
              areaColor: "rgba(0,0,0,0)",
            },
          });
        });
        const series = [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: city_type1,
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              // color: colorList[0],
              brushType: "stroke",
              // brushType: "fill",
              number: 3,
              period: 2,
              scale: 2.5,
            },
            // symbol: "arrow",
            // itemStyle: {
            //   color: colorList[0],
            // },
            zlevel: 1,
          },
          // {
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: city_type0,
          //   symbolSize: 10,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     // color: colorList[0],
          //     brushType: "stroke",
          //     // brushType: "fill",
          //     number: 3,
          //     period: 5,
          //     scale: 2.5,
          //   },
          //   // symbol: "arrow",
          //   // itemStyle: {
          //   //   color: colorList[0],
          //   // },
          //   zlevel: 1,
          // },
          // {
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: city_type3,
          //   symbolSize: 10,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     color: colorList[0],
          //     brushType: "stroke",
          //     brushType: "fill",
          //     number: 3,
          //     period: 8,
          //     scale: 2.5,
          //   },
          //   symbol: "arrow",
          //   itemStyle: {
          //     color: colorList[0],
          //   },
          //   zlevel: 1,
          // },
          {
            type: "map",
            map: "china",
            zoom: 1.2,
            tooltip: {
              show: false,
            },
            label: {
              show: false, // 显示省份名称
              color: "#04CFF5",
              align: "center",
            },
            // top: "18%",
            left: "center",
            roam: false, // 地图缩放和平移
            itemStyle: {
              // borderColor: "#c3f0f7", // 省分界线颜色  阴影效果的
              borderColor: "rgba(147, 235, 248, 1)", // 省分界线颜色  阴影效果的
              borderWidth: 1,
              areaColor: "#1674cc",
              areaColor: "#48ace0",
              // areaColor: {
              //   type: "radial",
              //   x: 0.5,
              //   y: 0.5,
              //   r: 0.8,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: "rgba(147, 235, 248, .1)", // 0% 处的颜色
              //     },
              //     {
              //       offset: 1,
              //       color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              //     },
              //   ],
              //   globalCoord: false, // 缺省为 false
              // },
              // shadowColor: "rgba(128, 217, 248, 1)",
              // shadowOffsetX: -2,
              // shadowOffsetY: 2,
              // shadowBlur: 10,
            },
            // 去除选中状态
            select: {
              disabled: true,
            },
            emphasis: {
              // 聚焦后颜色
              disabled: true, // 开启高亮
            },
            data: noColorData,
            z: 2,
          },
        ];
        const option = {
          geo: {
            map: "china",
            zoom: 1.2,
            label: {
              emphasis: {
                show: false,
              },
            },
            roam: false, //是否允许缩放
            itemStyle: {
              normal: {
                borderColor: "#c3f0f7",
                borderWidth: 2,
                areaColor: "transparent",
              },
            },
            emphasis: {
              // 聚焦后颜色
              disabled: true, // 开启高亮
            },
          },
          series: series,
        };
        // this.myChart6.setOption(option);
        clearInterval(this.mapTimer);
        this.mapTimer = null;
        this.mapTimer = setInterval(() => {
          const seconds = new Date().getSeconds();
          if (seconds % 2 === 0) option.series[0].data = city_type1;
          if (seconds % 6 === 0)
            option.series[0].data = [...city_type1, ...city_type2];
          if (seconds % 12 === 0)
            option.series[0].data = [
              ...city_type1,
              ...city_type2,
              ...city_type3,
            ];
          if (seconds % 2 === 1) option.series[0].data = [];

          this.myChart6.setOption(option);
        }, 1000);
      }
    },
    initWebsocket(wsObj, url) {
      let _this = this;
      if (wsObj.websocket) {
        wsObj.websocket.close();
      }
      wsObj.websocket = new WebSocket(url);
      const heartCheck = this.initHeartCheck(wsObj, url);
      wsObj.websocket.onopen = function () {
        heartCheck.start(this, wsObj, url);
      };
      wsObj.websocket.onmessage = function (data) {
        heartCheck.start(_this, wsObj, url);
        const flag = wsObj.flag;
        if (data.data !== "pong") {
          if (flag === 1) {
            // 整体数据，顶部
            _this.dashboardData = JSON.parse(data.data).data;
          } else if (flag === 2) {
            // 当日交易量 右上
            _this.currentDayTxData = JSON.parse(data.data).data;
            _this.getCurrentDayTxData();
          } else if (flag === 3) {
            // 公司介绍 左上
            _this.introduceList = JSON.parse(data.data).data.split("\n");
          } else if (flag === 4) {
            // 用户数据 左下
            _this.customerList = JSON.parse(data.data).data;
            _this.$refs.customerListRef.style.animationDuration = `${
              _this.customerList.length / 1
            }s`;
          } else if (flag === 5) {
            // 行业数据 右下
            _this.businessDistributionData = JSON.parse(data.data).data;
            _this.getBusinessDistributionData();
          } else {
            // 地图 中间
            let resData = JSON.parse(data.data).data;
            // _this.geoCoordMap = data;
            for (let i = 0; i < _this.geoCoordMap.length; i++) {
              for (let j = 0; j < resData.length; j++) {
                if (_this.geoCoordMap[i].name === resData[j].name) {
                  _this.geoCoordMap[i].number = resData[j].number;
                }
              }
            }
            // console.log(_this.geoCoordMap);
            // _this.getChinaData();
          }
        }
      };
      wsObj.websocket.onerror = function (data) {
        setTimeout(() => {
          _this.initWebsocket(wsObj, url);
        }, 4000);
      };
    },
    initHeartCheck(wsObj, url) {
      let _this = this;
      return {
        timeout: 10 * 1000, // 每10s向服务端发送一次消息
        serverTimeout: 10 * 1000, // 10s收不到服务端消息算超时
        timer: null,
        serverTimer: null,
        reset() {
          // 心跳检测重置
          clearTimeout(this.timer);
          clearTimeout(this.serverTimer);
          this.timer = null;
          this.serverTimer = null;
          return this;
        },
        start(that, wsObj, url) {
          // 心跳检测启动
          this.reset();

          this.timer = setTimeout(() => {
            wsObj.websocket.send("ping"); // 定时向服务端发送消息
            // let _this = this;
            if (!this.serverTimer) {
              this.serverTimer = setTimeout(() => {
                // 关闭连接触发重连
                console.log(
                  new Date().toLocaleString(),
                  "not received pong, close the websocket"
                );
                // debugger;
                _this.initWebsocket(wsObj, url); // 重置ws链接
              }, this.serverTimeout);
            }
          }, this.timeout);
        },
      };
    },
    // 数据大屏自适应函数
    // handleScreenAuto() {
    //   const designDraftWidth = 1920; //设计稿的宽度
    //   const designDraftHeight = 1080; //设计稿的高度
    //   // 根据屏幕的变化适配的比例
    //   const scale =
    //     document.documentElement.clientWidth /
    //       document.documentElement.clientHeight <
    //     designDraftWidth / designDraftHeight
    //       ? document.documentElement.clientWidth / designDraftWidth
    //       : document.documentElement.clientHeight / designDraftHeight;
    //   // 缩放比例
    //   document.querySelector(
    //     "#screen"
    //   ).style.transform = `scale(${scale}) translate(-50%, -50%)`;
    // },
    handleScreenAuto(width, height) {
      // return;
      // console.log("auto");
      const designWidth = this.$route.query.width || 1920; //设计稿的宽度
      const designHeight = this.$route.query.height || 1080; //设计稿的高度
      const renderDom = document.querySelector("#screen");
      let clientHeight = Number(width) || document.documentElement.clientHeight;
      let clientWidth = Number(height) || document.documentElement.clientWidth;

      // let clientHeight = 512;
      // let clientWidth = 1080;

      let scale = 1;
      let scaleWidth = clientWidth / designWidth;
      let scaleHeight = clientHeight / designHeight;

      // console.log(clientWidth, "width");
      // console.log(clientHeight, "height");

      if (scaleWidth > 1 || scaleHeight > 1) {
        scale = Math.min(scaleWidth, scaleHeight);
      } else {
        scale = Math.min(scaleWidth, scaleHeight);
      }

      //缩放比例
      renderDom.style.transform = `scale(${scale})`;
    },
    formatNumber(value) {
      value = Number(value);
      return value.toLocaleString("en-US");
    },
    getDateState() {
      let date = new Date();
      if (date.getHours >= 0 && date.getHours <= 5) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #000074;
}

.screen {
  background: url("@/assets/img/report/background.png") no-repeat;
  background-size: contain;
  // width: 100%;
  // height: 100%;
  width: 1920px;
  height: 1080px;
  position: fixed;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  // color: #adf8ff;
  color: #adf8ff;

  .top {
    display: flex;
    justify-content: center;
    padding-top: 36px;
    // background: url("@/assets/img/report/logo.png") no-repeat left top;
  }
  .dashboard {
    display: flex;
    justify-content: center;
    margin-top: 70px;
    li {
      margin: 0 90px;
      flex: 1;
      // font-weight: bold;
    }
    i {
      font-size: 33px;
      margin: 6px;
    }
    p {
      text-align: center;
    }
    .number {
      font-size: 51px;
      font-family: AdobeHeitiStd;
      color: #1fd7ff;
    }
    .label {
      font-size: 22px;
      color: #f9feff;
    }
    :nth-child(1) .number {
      color: #fe3063;
    }
    :nth-child(2) .number {
      color: #1fd7ff;
    }
    :nth-child(3) .number {
      color: #feb449;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding: 0 46px 0 60px;
    .left {
      width: 500px;
      margin: 27px 0 0 0;
      text-align: left;
      .introduce {
        height: 494px;
        padding-top: 23px;
        // background: url("@/assets/img/report/left-top.png") no-repeat left top;
        .title::before {
          background: url("@/assets/img/report/introduce-logo.png") no-repeat
            center;
        }
        .introduce-content {
          font-size: 18px;
          text-indent: 2em;
          padding: 9px 60px 0 24px;
          i {
            display: block;
            line-height: 28px;
          }
        }
      }
      .customer {
        height: 353px;
        // background: url("@/assets/img/report/left-bottom.png") no-repeat -6px;
        .title::before {
          background: url("@/assets/img/report/customer-logo.png") no-repeat
            center;
        }
        .scroll-wrap {
          margin-top: 12px;
          height: 205px;
          overflow: hidden;
        }
        .customer-list {
          animation: scrollList 10s linear infinite normal;
          font-size: 18px;
          padding: 0 62px 0 30px;
          li {
            display: flex;
            justify-content: space-between;
            height: 36px;
          }
        }
      }
      .title {
        font-size: 22px;
        padding-left: 36px;
        margin-left: 24px;
        position: relative;
        // font-weight: bold;
        text-align: left;
        // color: #e87891;
        &::before {
          content: "";
          position: absolute;
          width: 30px;
          height: 30px;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
    }
    .right {
      width: 430px;
      margin: 14px 0 0 0;
      .trade {
        height: 256px;
        padding-top: 30px;
        // background: url("@/assets/img/report/right-top.png") no-repeat right top;
        .title::before {
          background: url("@/assets/img/report/trade-logo.png") no-repeat center;
        }
      }
      .industry {
        height: 268px;
        padding: 26px 0 0 7px;
        position: relative;
        // background: url("@/assets/img/report/right-middle.png") no-repeat right -6px;
        .title::before {
          background: url("@/assets/img/report/industry-logo.png") no-repeat
            center;
        }
        .legend {
          position: absolute;
          right: 36px;
          top: 46px;
        }
      }
      .title {
        font-size: 20px;
        padding-left: 32px;
        margin-left: 20px;
        position: relative;
        // font-weight: bold;
        text-align: left;
        // color: #e87891;
        &::before {
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
      .solution {
        margin-top: 12px;
        position: relative;
        .title::before {
          background: url("@/assets/img/report/solution-logo.png") no-repeat
            center;
        }
        ul {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          transform: translateX(13px);
          li {
            cursor: pointer;
            padding-top: 15px;
            width: 100px;
            height: 100px;
            img {
              margin: 0 auto 6px;
            }
          }
        }
        .play-icon {
          cursor: pointer;
          position: absolute;
          top: 154px;
          left: -582px;
          width: 200px;
          height: 40px;
          background: url("@/assets/img/report/play.png") no-repeat center;
        }
      }
    }
    .middle {
      position: relative;
      flex: 1;
      padding-left: 38px;
      .map-legend {
        position: absolute;
        font-size: 16px;
        top: 491px;
        left: 131px;
        p {
          line-height: 30px;
          position: relative;
          padding-left: 30px;
        }
        .business-legend::before {
          content: "";
          position: absolute;
          background: #1674cc;
          background: linear-gradient(#013954, rgba(128, 217, 248, 1));
          // box-shadow: 0 4px 8px 0 ;
          width: 18px;
          height: 18px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}

#map-chart {
  width: 750px;
  height: 650px;
}
#trade-chart {
  width: 400px;
  height: 200px;
  transform: translateY(-13px);
}
#industry-chart {
  width: 400px;
  height: 200px;
}
@keyframes scrollList {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateY(-100%);
  }
}
.video-modal {
  position: fixed;
  background: #000;
  z-index: 100;
  width: 100%;
  height: 100%;
  .close-icon {
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    .close {
      position: absolute;
      width: 16px;
      height: 16px;
      &::before,
      &::after {
        background: #fff;
      }
    }
  }
}
.scaleplate {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  display: none;
  flex-wrap: wrap;
  li {
    width: 33.33%;
    height: 33.33%;
    border: 1px solid #fff;
  }
}
</style>
